<template>
	<view class ="enroll">
		<view class="backTomine" @tap = "backTomine">
			返回
		</view>	
		<image class = "image" src="../../../assets/images/leju-logo.png" mode=""></image>
		<view class="mobile" >
			<input  v-model="tel" type="text" placeholder="手机号" />
		</view>
		<view class="password" >
			<input  v-model="password" type="text" placeholder="密码" />
		</view>
		<view class="username" >
			<input v-model="username" type="text" placeholder="用户名" />
		</view>
		<view class="lovername" >
			<input v-model="nickname" type="text" placeholder="昵称" />
		</view>
		<view class="keyname" >
			<view class="left">
				<input v-model="verCode" type="text" placeholder="验证码" />
			</view>
			<view class="right" >
				获取验证码
			</view>
		</view>
		
		<view class="enrolls" @tap = "enrolls">
			注册
		</view>
	</view>
</template>

<script>
	import http from "../../../utils/http.js"
	export default {
		data() {
			return {
				avatar:'/assets/images/leju-logo.png',
				tel:'',
				password:'',
				username:'',
				nickname:'',
				verCode:'',
				isRotate:false,
			};
		},
		methods:{
			backTomine(){
				uni.navigateTo({
					url:"../login/login"
				})
			},
			// getVerCode(){
			// 	if(this.tel.length != 11){
			// 		uni.showToast({
			// 			position:'bottom',
			// 			icon:"none",
			// 			title:"电话号码不正确"
			// 		})	
			// 	}
			// },
			enrolls(){
				if(this.tel.length != 11){
					uni.showToast({
						position:'bottom',
						icon:"none",
						title:"电话号码不正确"
					})	
					return false;
				};
				if(this.password.length < 6){
					uni.showToast({
						position:'bottom',
						icon:"none",
						title:"密码不正确"
					})	
					return false;
				};
				if(this.username.length < 2){
					uni.showToast({
						position:'bottom',
						icon:"none",
						title:"用户名长度2~12"
					})	
					return false;
				};
				if(this.verCode.length != 4){
					uni.showToast({
						position:'bottom',
						icon:"none",
						title:"验证码不正确"
					})	
					return false;
				};
				
				http.post("/api/leju/front/user/register",{
					tel:this.tel,
					password:this.password,
					avatar:this.avatar,
					username:this.username,
					nickname:this.nickname
				}).then(res =>{
					console.log(res);
					if(res.data.code == "S"){
						uni.showToast({
							title:"注册成功"
						})
					}
					setTimeout(()=>{
						uni.navigateTo({
							url:'../login/login'
						})
					},3000)	
				})
				
				
			}
			
		}
	}
</script>

<style lang="scss">
	.enroll{
		width:750rpx;
		// height: 100vh;
		background-color:wheat;
		padding:0.1rpx;
		.backTomine{
			margin:10px;
			font-weight:bolder;
		}
		.image{
			width:212rpx;
			height: 212rpx;
			margin:154rpx 270rpx 80rpx 268rpx;
			border-radius:50%;
		}
		.mobile{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			border-radius: 14rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.password{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			border-radius: 14rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.username{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			border-radius: 14rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.lovername{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.keyname{
			width:536rpx;
				height: 94rpx;
				margin-left:108rpx;
				border-radius: 14rpx;
				margin-bottom:80rpx;
				border-radius:50rpx;
				display:flex;
				justify-content: space-around;
				align-items:center;
				border:1rpx yellowgreen solid;
				font-size: 20rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;
				.left{
					// margin-left:60rpx;
					text-indent: 20rpx;
				}
				.right{
					color:gray;
					font-size:12rpx;
				}
		}
		.enrolls{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			background: #354E44;
			border-radius: 14rpx;
			margin-bottom:100rpx;
			border-radius:20rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx black solid;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
			font-weight: bolder;
		}
		
	}
</style>
